<ion-header class="opacity-header">
  <ion-toolbar class="opacity-toolbar">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>盛融贷</ion-title>
    <ion-buttons slot="end">
      <ion-button [routerLink]="['/auth/system-message']">
        <ion-icon name="mail-unread"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [scrollEvents]="true" (ionScroll)="scrollHandler($event)">
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
        pullingText="下拉刷新"
        refreshingText="加载中...">
    </ion-refresher-content>
  </ion-refresher>
  <!-- 已登录 -->
  <div class="content-top" [ngClass]="{'bg-blue': isLend, 'bg-orange': !isLend}">
    <ion-item lines="none" class="avatar-box">
      <ion-avatar slot="start" (click)="pushAvatarPage()">
        <img src="{{user.photo}}">
      </ion-avatar>
      <ion-label>
        <ion-text color="light">
          <h3 class="user-name">{{user.name}}</h3>
          <div class="user-status-list">
            <span class="iconfont icon-yonghuziliao-xianxing active"></span>
            <span class="iconfont icon-shouji active"></span>
            <!--<span class="iconfont icon-youxiang"></span>-->
          </div>
          <p class="user-greet">
            {{greetKey | i18nSelect:greetings}}
          </p>
        </ion-text>
      </ion-label>
    </ion-item>
    <!-- 出借人菜单 -->
    <ion-grid *ngIf="isLend; else loanGrid">
      <ion-row>
        <ion-col>
          <a [routerLink]="['/auth/user-lend-plan']">
            <span class="iconfont icon-daikuan-xianxing"></span>
            <span>回款计划</span>
          </a>
        </ion-col>
        <ion-col>
          <a [routerLink]="['/auth/user-lend']">
            <span class="iconfont icon-qianbao"></span>
            <span>我的出借</span>
          </a>
        </ion-col>
        <ion-col>
          <a [routerLink]="['/auth/user-records', {recordType: 'all'}]">
            <span class="iconfont icon-liulanjilu"></span>
            <span>交易记录</span>
          </a>
        </ion-col>
        <!--<ion-col>-->
          <!--<a [routerLink]="['/auth/user-bonus']">-->
            <!--<span class="iconfont icon-youhuijuan-xianxing"></span>-->
            <!--<span>优惠红包</span>-->
          <!--</a>-->
        <!--</ion-col>-->
      </ion-row>
    </ion-grid>
    <!-- 借款人菜单 -->
    <ng-template #loanGrid>
      <ion-grid>
        <ion-row>
          <ion-col>
            <a [routerLink]="['/auth/user-loan-plan']">
              <span class="iconfont icon-huankuan-xianxing"></span>
              <span>还款计划</span>
            </a>
          </ion-col>
          <ion-col>
            <a [routerLink]="['/auth/user-loan']">
              <span class="iconfont icon-licaishouyi"></span>
              <span>我的借款</span>
            </a>
          </ion-col>
          <ion-col>
            <a [routerLink]="['/auth/user-records', {recordType: 'all'}]">
              <span class="iconfont icon-liulanjilu"></span>
              <span>交易记录</span>
            </a>
          </ion-col>
          <ion-col>
            <a [routerLink]="['/auth/loan', {userRole: 2, from: '/tabs/user'}]">
              <span class="iconfont icon-shenpi"></span>
              <span>借款管理</span>
            </a>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ng-template>
  </div>

  <!-- 出借人或借款人账户 -->
  <div class="amount-box" style="margin-top: -76px;">
    <div [class.color-blue]="isLend" [class.color-orange]="!isLend">
      <span class="px14">可用余额(元)</span><span float-right>{{userFund.balance | number:'.2-2'}}</span>
    </div>
    <div class="color-gray">
      <span class="px14">总收益(元)</span><span float-right>{{userFund.total_income | number:'.2-2'}}</span>
    </div>
    <div>
      <div float-right>
        <a class="btn left" [class.loan]="!isLend" [routerLink]="['/auth/user-recharge']">充值</a>
        <a class="btn right" [class.loan]="!isLend" [routerLink]="['/auth/user-cash-withdrawal']">提现</a>
      </div>
    </div>
  </div>

  <!-- 资产金额列表 -->
  <div class="amount-box">
    <div class="color-blue">
      <span class="px14">总资产(元)</span><span float-right>{{userFund.total_assets | number:'.2-2'}}</span>
    </div>
    <div class="color-gray">
      <span class="px14">可用(元)</span><span float-right>{{userFund.balance | number:'.2-2'}}</span>
    </div>
    <div class="color-gray">
      <span class="px14">冻结(元)</span><span float-right>{{userFund.freeze | number:'.2-2'}}</span>
    </div>
    <div class="color-gray">
      <span class="px14">待收(元)</span><span float-right>{{userFund.no_receive | number:'.2-2'}}</span>
    </div>
    <div class="color-gray">
      <span class="px14">待还(元)</span><span float-right>{{userFund.no_repayment | number:'.2-2'}}</span>
    </div>
    <div class="color-gray">
      <span class="px14">我的奖励(元)</span><span float-right>{{userFund.reward | number:'.2-2'}}</span>
    </div>
  </div>

  <!--<div class="amount-box">-->
    <!--<div class="color-blue">-->
      <!--<ion-icon name="md-gift"></ion-icon>-->
      <!--<span class="color-blue px14">我的奖励</span>-->
    <!--</div>-->
    <!--<div class="color-blue">-->
      <!--<ion-icon name="md-contacts"></ion-icon>-->
      <!--<span class="color-blue px14">我的推广</span>-->
    <!--</div>-->
  <!--</div>-->

  <div class="content-bottom">
    <span>{{this.registerTime['time'] | date:'yyyy年MM月dd日注册'}}</span>
    <span>累计加入{{registerDays}}天</span>
  </div>

</ion-content>
